<template>
  <div id="ai-components">
    <div class="step-one-content">
      <div class="chart-box-radar all-box">
        <HomeChart1 />
      </div>
      <div
        v-loading="loading"
        element-loading-text="加载中..."
        :element-loading-spinner="svg"
        class="one-item-right all-box"
      >
        <div class="tab">
          <div
            v-for="(item, index) in tab"
            :key="index"
            :class="{'active':active===index}"
            @click="active=index"
          >{{ item }}</div>
        </div>
        <div class="one-right-wrap">
          <div class="one-left">
            {{ data }}
            <div
              v-for="(item, index) in data.nandian"
              :key="index"
              :class="{'red':item.avgScore<60,'orange':item.avgScore>=60&&item.avgScore<80,'green':item.avgScore>=80,'active':subActive===index}"
              @click="subActive=index"
            >
              {{ item.weiduName}}
            </div>
          </div>
          <div class="one-right">
            <div class="one-right-title">
              <img src="@/assets/img/home/right-title.png">
              智能评价
            </div>
            <div class="one-right-content">
              {{ content }}
            </div>
            <div class="one-right-point">
              <img src="@/assets/img/home/right-point.png">
              点击与我对话巩固知识点
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import HomeChart1 from "@/components/HomeChart1.vue";
export default {
  components: {
    HomeChart1,
  },
  data() {
    return {
      roles: "",
      loading: false,
      data: {
        nandian: [],
        gaijin: [],
      },
      active: -1,
      subActive: 0,
      content: "",
      tab: ["教学难点分析", "教学改进建议"],
    };
  },
  watch: {
    subActive(newVal) {
      if (this.active === 0) {
        this.content = this.data.nandian[newVal].nandian;
      } else if (this.active === 1) {
        this.content = this.data.gaijin[newVal].gaijin;
      }
    },
    active(newVal) {
      if (newVal === 0 && this.subActive !== undefined) {
        this.content = this.data.nandian[this.subActive].nandian;
      } else if (newVal === 1 && this.subActive !== undefined) {
        this.content = this.data.gaijin[this.subActive].gaijin;
      }
    },
  },
  created() {
    this.roles = JSON.parse(localStorage.getItem("userInfo")).roles[0];
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      this.loading = true;
      let url = "";
      if (this.roles === "teacher") {
        url = "/dify/teacher/difficultyAndImprove?bookInfoId=1";
      }
      if (this.roles === "student") {
        url = "dify/student/knowledgePoint?bookInfoId=1";
      }
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          if (res.code === 200) {
            this.data = res.data;
            this.active = 0;
          } else {
            this.$message.error(res.msg || "获取数据失败，请稍后重试");
          }
        })
        .catch((error) => {
          this.$message.error(error.message || "获取数据失败，请稍后重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#ai-components {
  .step-one-content {
    display: flex;
    gap: 20px;
    .chart-box-radar {
      min-width: 530px;
      width: 530px;
      height: 300px;
      box-sizing: border-box;
      > div {
        width: 530px;
        height: 300px;
      }
    }
    .one-item-right {
      height: 300px;
      flex: 1;
      padding: 34px;
      box-sizing: border-box;
      .tab {
        display: flex;
        gap: 10px;
        margin-bottom: 50px;
        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 110px;
          height: 27px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #b2c8ff;
          font-size: 14px;
          color: #457aff;
          cursor: pointer;
          &.active,
          &:hover {
            background: #457aff;
            color: #ffffff;
          }
        }
      }
      .one-right-wrap {
        display: flex;
        justify-content: space-between;
        gap: 50px;
        .one-left {
          min-width: 100px;
          > div {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: bold;
            font-size: 14px;
            color: #34394d;
            margin-bottom: 8px;
            cursor: pointer;
            &.active,
            &:hover {
              color: #457aff;
            }
            &::before {
              content: "";
              display: block;
              width: 7px;
              height: 7px;
              background: #e86a6a;
              border-radius: 50%;
            }
            &.red {
              &::before {
                background: red;
              }
            }
            &.orange {
              &::before {
                background: #e86a6a;
              }
            }
            &.green {
              &::before {
                background: green;
              }
            }
          }
        }
        .one-right {
          position: relative;
          width: 100%;
          height: 159px;
          background: #eff5fd;
          border-radius: 10px;
          padding: 13px 30px;
          box-sizing: border-box;
          .one-right-title {
            font-weight: bold;
            font-size: 14px;
            color: #1e5afa;
            display: flex;
            align-items: center;
          }
          .one-right-content {
            font-size: 14px;
            color: #154a8e;
            line-height: 23px;
          }
          .one-right-point {
            display: flex;
            align-items: center;
            gap: 10px;
            position: absolute;
            top: -20px;
            right: 40px;
            font-size: 16px;
            color: #457aff;
          }
        }
      }
    }
  }
}
</style>